<template>
  <div class="class-login">
    <div>
      <h1>{{ msg }}</h1>
      <br/>
      {{ userName }}<input type="text" v-model="inpUserName"/>
      <br/>
      {{ password }}<input type="text" v-model="inpPassword"/>
      <br/>
      <button id="but-login" :value="submit" @click="login">{{ butLogin }}</button>
      <div>
        <input type="text" v-model="newWord"/>
        <button  :value="editWord" @click="mdEditWord">{{ editWord }}</button>
      </div>
    </div>
    <button @click='apidouban'>/api访问</button>
    <button @click='douban'>/dou访问</button>
    <button @click='weather'>天气</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  created () {
    document.querySelector('body').setAttribute('style', 'background-color:#efeff4;')
  },
  data () {
    return {
      msg: 'this is login page',
      userName: '用户名',
      password: '密  码',
      butLogin: '登录',
      submit: '回去登录页',
      register: '注册',
      editWord: '修改文字',
      newWord: '你想叫什么',
      inpUserName: '',
      inpPassword: ''
    }
  },
  methods: {
    mdEditWord () {
      console.log(this.newWord)
      var but1 = document.getElementById('but-login')
      console.log(but1.value)
      this.userName = this.newWord
    },
    apidouban () {
      let url = '/api/movie/top250'
      console.log('start ajax with axios:' + url)
      this.$axios.get(url, {
        params: {
          count: 3,
          start: 0
        }
      })
        .then(res => {
          console.log(res.data)
        })
        .catch(error => {
          console.log(error)
        })
    },
    douban () {
      let url = '/dou/movie/top250'
      console.log('start ajax with axios:' + url)
      this.$axios.get(url, {
        params: {
          count: 3,
          start: 0
        }
      })
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
    },
    weather () {
      let url = '/weather/cityinfo/101010100.html'
      console.log('start ajax with axios:' + url)
      this.$axios.get(url)
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
    },
    login () {
      // console.log('start login')
      let ss = this.$store
      ss.commit('logininfo/login')
      // console.log("login flag is : " + this.$store.state.logininfo.IsLogin)
      ss.commit('updateUserInfo',{id: this.inpPassword,token: 'token_xxxxx',name: this.inpUserName})
      this.$router.push('/')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.class-login {
  display: flex;
  align-items: center; /*定义body的元素垂直居中*/
  justify-content: center; /*定义body的里的元素水平居中*/
  /* display: flex;
  //实现垂直居中
  align-items: center;
  //实现水平居中
  justify-content: center; */
  margin: 0,auto;
  width: 100%;
  height:100%;
  background-image: url('../assets/deepBackground.jpg'); /*定义背景图位置*/
  background-repeat: no-repeat; /*背景图不重复*/
  background-size: cover; /*背景图拉伸，默认是只显示一张原图大小*/
}
h1, h2 {
  font-weight: normal;
  display: inline
}
/*
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
} */
</style>
